<script setup>
import api from '@/api'
import { Message } from '@arco-design/web-vue'
import { nextTick, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const $route = useRoute()
const $router = useRouter()
const pageType = $route.query.type // 1新建2查看3编辑
const id = $route.query.id
console.log('pageType', pageType)
console.log('id', id)

const title = ref('')
const data = ref([])

const detailInfo = ref(null)

const addSon = (rowIndex) => {
  data.value[rowIndex].son.push({
    problem: '问题2',
    examine: '要点1',
    ordinary: 1,
    good: 3,
    excellent: 5,
  })
  getTotalNum()
}

const deleteSon = (rowIndex, index) => {
  data.value[rowIndex].son.splice(index, 1)
  getTotalNum()
}

const addItem = () => {
  data.value.push({
    plate_name: '',
    son: [
      {
        problem: '',
        examine: '',
        ordinary: 1,
        good: 3,
        excellent: 5,
      },
    ],
  })
  getTotalNum()
}

const deleteItem = (rowIndex) => {
  data.value.splice(rowIndex, 1)
  getTotalNum()
}

const toJump = (url) => {
  console.log('router', $router.push(url))
  $router.push(url)
}

const goBack = () => {
  $router.go(-1)
}

const bankuaiNum = ref(0)
const wentiNum = ref(0)
const zongfenNum = ref(0)

const getTotalNum = () => {
  var bankuai = 0
  var wenti = 0
  var zongfen = 0
  for (const item of data.value) {
    bankuai++
    for (const items of item.son) {
      wenti++
      zongfen += items.excellent
    }
  }
  bankuaiNum.value = bankuai
  wentiNum.value = wenti
  zongfenNum.value = zongfen
}

const getDetail = async () => {
  const res = await api.get(`/recruit/templateDetail?template_id=${id}`)
  // console.log('data', data)
  detailInfo.value = res.data
  title.value = res.data.template_name
  data.value = res.data.content

  getTotalNum()
}

// 获取数据
if (pageType != 1) {
  getDetail()
} else {
  getTotalNum()
}

const save = async () => {
  if (!title.value) {
    Message.warning('请填写模板名称')
    return
  }
  if (data.value.length == 0) {
    Message.warning('请至少配置一个板块')
    return
  }
  let flag = true
  for (const item of data.value) {
    if (!item.plate_name) {
      flag = false
      Message.warning('请填写板块名称')
      return
      break
    }
    if (item.son.length == 0) {
      flag = false
      Message.warning('请至少配置一个问题')
      return
      break
    }
    for (const items of item.son) {
      if (!items.problem) {
        flag = false
        Message.warning('请填写问题')
        return
        break
      }
      if (!items.examine) {
        flag = false
        Message.warning('请填写考核要点')
        return
        break
      }
      // if (items.ordinary + items.good + items.excellent != 15) {
      //   flag = false
      //   Message.warning('分值总和必须为15')
      //   break
      // }
    }
  }
  if (!flag) {
    return
  }

  let formData = {
    template_name: title.value,
    content: JSON.stringify(data.value),
    plate_number: bankuaiNum.value,
    problem_number: wentiNum.value,
    score: zongfenNum.value,
  }

  let url = '/recruit/createTemplate'
  if (pageType != 1) {
    url = '/recruit/updateTemplate'
    formData.template_id = id
  }

  const res = await api.post(url, formData)
  if (res.code == 200) {
    Message.success('保存成功')
    toJump('/recruit/formwork/index')
  } else {
    Message.error(res.message)
  }
}
</script>

<template>
  <div class="page">
    <div class="header fz18 fb jc_c at_c">
      <template v-if="pageType == 1">新增招聘模板</template>
      <template v-if="pageType == 2">查看招聘模板</template>
      <template v-if="pageType == 3">编辑招聘模板</template>
    </div>
    <div class="header flex jc_b">
      <div v-if="pageType != 2">
        <a-input v-model="title" placeholder="请输入模板名称">
          <template #prepend> 招聘模板名称 </template>
        </a-input>
      </div>
      <div v-if="pageType == 2">
        <a-input readonly v-model="title" placeholder="请输入模板名称">
          <template #prepend> 招聘模板名称 </template>
        </a-input>
      </div>
      <!-- <a-button v-if="pageType != 2" @click="addItem" type="primary">增加板块</a-button> -->
    </div>
    <div class="flex" v-if="pageType != 2">
      <div class="table_name">岗位画像配置</div>
      <div class="table_body">
        <a-table
          :data="data"
          :pagination="false"
          :bordered="{ headerCell: true, cell: true }"
        >
          <template #columns>
            <a-table-column
              title="板块"
              align="center"
              data-index="plate_name"
              :width="400"
            >
              <template #cell="{ record, rowIndex }">
                <div class="flex at_c">
                  <a-button
                    v-if="pageType != 2"
                    type="primary"
                    status="danger"
                    size="mini"
                    @click="deleteItem(rowIndex)"
                    >删除板块</a-button
                  >
                  <a-input v-model="record.plate_name" />
                </div>
              </template>
            </a-table-column>
            <a-table-column title="问题" align="center" data-index="problem">
              <template #cell="{ record, rowIndex }">
                <div
                  class="diytd"
                  v-for="(item, index) in record.son"
                  :key="index"
                >
                  <a-textarea v-model="item.problem" />
                </div>
                <div style="height: 40px">
                  <a-button
                    v-if="pageType != 2"
                    type="primary"
                    size="mini"
                    @click="addSon(rowIndex)"
                    style="width: 100%; height: 100%"
                    >增加问题</a-button
                  >
                </div>
              </template>
            </a-table-column>
            <a-table-column
              title="考核要点"
              align="center"
              data-index="examine"
            >
              <template #cell="{ record }">
                <div
                  class="diytd"
                  v-for="(item, index) in record.son"
                  :key="index"
                >
                  <a-textarea v-model="item.examine" />
                </div>
                <div style="height: 40px"></div>
              </template>
            </a-table-column>
            <a-table-column title="分值" align="center">
              <a-table-column
                title="普通"
                align="center"
                :width="100"
                data-index="ordinary"
              >
                <template #cell="{ record }">
                  <div
                    class="diytd"
                    v-for="(item, index) in record.son"
                    :key="index"
                  >
                    <div class="h32 jc_c">
                      <a-input-number
                        v-model="item.ordinary"
                        :min="0"
                        :max="100"
                        :step="1"
                        hide-button
                        size="mini"
                      />
                    </div>
                  </div>
                  <div style="height: 40px"></div>
                </template>
              </a-table-column>
              <a-table-column
                title="良好"
                align="center"
                :width="100"
                data-index="good"
              >
                <template #cell="{ record }">
                  <div
                    class="diytd"
                    v-for="(item, index) in record.son"
                    :key="index"
                  >
                    <div class="h32 jc_c">
                      <a-input-number
                        v-model="item.good"
                        :min="0"
                        :max="100"
                        :step="1"
                        hide-button
                        size="mini"
                      />
                    </div>
                  </div>
                  <div style="height: 40px"></div>
                </template>
              </a-table-column>
              <a-table-column
                title="优秀"
                align="center"
                :width="100"
                data-index="excellent"
              >
                <template #cell="{ record }">
                  <div
                    class="diytd"
                    v-for="(item, index) in record.son"
                    :key="index"
                  >
                    <div class="h32 jc_c">
                      <a-input-number
                        v-model="item.excellent"
                        :min="0"
                        :max="100"
                        :step="1"
                        hide-button
                        size="mini"
                      />
                    </div>
                  </div>
                  <div style="height: 40px"></div>
                </template>
              </a-table-column>
            </a-table-column>

            <a-table-column
              v-if="pageType != 2"
              title="操作"
              align="center"
              :width="100"
            >
              <template #cell="{ record, rowIndex }">
                <div
                  class="diytd"
                  v-for="(item, index) in record.son"
                  :key="index"
                >
                  <div class="h32">
                    <a-button
                      type="primary"
                      status="danger"
                      size="mini"
                      @click="deleteSon(rowIndex, index)"
                      >删除问题</a-button
                    >
                  </div>
                </div>
                <div style="height: 40px"></div>
              </template>
            </a-table-column>
          </template>

          <template #footer style="padding: 0">
            <div style="width: 400px; height: 40px">
              <a-button
                v-if="pageType != 2"
                @click="addItem"
                type="primary"
                style="width: 100%; height: 100%"
                >增加板块</a-button
              >
            </div>
          </template>
        </a-table>
      </div>
    </div>

    <div class="flex" v-if="pageType == 2">
      <div class="table_name">岗位画像配置</div>
      <div class="table_body">
        <a-table
          :data="data"
          :pagination="false"
          :bordered="{ headerCell: true, cell: true }"
        >
          <template #columns>
            <a-table-column
              title="板块"
              align="center"
              data-index="plate_name"
              :width="400"
            >
              <template #cell="{ record, rowIndex }">
                <div class="flex at_c">
                  <a-button
                    v-if="pageType != 2"
                    type="primary"
                    status="danger"
                    size="mini"
                    @click="deleteItem(rowIndex)"
                    >删除板块</a-button
                  >
                  <a-input v-model="record.plate_name" readonly />
                  <a-button
                    v-if="pageType != 2"
                    type="primary"
                    size="mini"
                    @click="addSon(rowIndex)"
                    >增加问题</a-button
                  >
                </div>
              </template>
            </a-table-column>
            <a-table-column title="问题" align="center" data-index="problem">
              <template #cell="{ record }">
                <div
                  class="diytd"
                  v-for="(item, index) in record.son"
                  :key="index"
                >
                  <a-textarea readonly v-model="item.problem" />
                </div>
              </template>
            </a-table-column>
            <a-table-column
              title="考核要点"
              align="center"
              data-index="examine"
            >
              <template #cell="{ record }">
                <div
                  class="diytd"
                  v-for="(item, index) in record.son"
                  :key="index"
                >
                  <a-textarea readonly v-model="item.examine" />
                </div>
              </template>
            </a-table-column>
            <a-table-column title="分值" align="center">
              <a-table-column
                title="普通"
                align="center"
                :width="100"
                data-index="ordinary"
              >
                <template #cell="{ record }">
                  <div
                    class="diytd"
                    v-for="(item, index) in record.son"
                    :key="index"
                  >
                    <div class="h32 jc_c">
                      <a-input-number
                        readonly
                        v-model="item.ordinary"
                        :min="0"
                        :max="100"
                        :step="1"
                        hide-button
                        size="mini"
                      />
                    </div>
                  </div>
                </template>
              </a-table-column>
              <a-table-column
                title="良好"
                align="center"
                :width="100"
                data-index="good"
              >
                <template #cell="{ record }">
                  <div
                    class="diytd"
                    v-for="(item, index) in record.son"
                    :key="index"
                  >
                    <div class="h32 jc_c">
                      <a-input-number
                        readonly
                        v-model="item.good"
                        :min="0"
                        :max="100"
                        :step="1"
                        hide-button
                        size="mini"
                      />
                    </div>
                  </div>
                </template>
              </a-table-column>
              <a-table-column
                title="优秀"
                align="center"
                :width="100"
                data-index="excellent"
              >
                <template #cell="{ record }">
                  <div
                    class="diytd"
                    v-for="(item, index) in record.son"
                    :key="index"
                  >
                    <div class="h32 jc_c">
                      <a-input-number
                        readonly
                        v-model="item.excellent"
                        :min="0"
                        :max="100"
                        :step="1"
                        hide-button
                        size="mini"
                      />
                    </div>
                  </div>
                </template>
              </a-table-column>
            </a-table-column>

            <a-table-column
              v-if="pageType != 2"
              title="操作"
              align="center"
              :width="100"
            >
              <template #cell="{ record, rowIndex }">
                <div
                  class="diytd"
                  v-for="(item, index) in record.son"
                  :key="index"
                >
                  <div class="h32">
                    <a-button
                      type="primary"
                      status="danger"
                      size="mini"
                      @click="deleteSon(rowIndex, index)"
                      >删除问题</a-button
                    >
                  </div>
                </div>
              </template>
            </a-table-column>
          </template>
        </a-table>
      </div>
    </div>

    <div class="table_bottom">
      <div class="name">合计</div>
      <div style="flex: 1">板块：{{ bankuaiNum }}</div>
      <div style="flex: 1">问题：{{ wentiNum }}</div>
      <div style="flex: 1">总分：{{ zongfenNum }}</div>
    </div>

    <div class="form_bottom">
      <a-space>
        <a-button type="primary" status="danger" @click="goBack">取消</a-button>
        <a-button v-if="pageType != 2" type="primary" @click="save"
          >提交</a-button
        >
      </a-space>
    </div>
  </div>
</template>

<style scoped>
.page {
  width: 100%;
  height: 100%;
  border-bottom: 0;
  background-color: #fff;
}

.header {
  height: 52px;
}

.diytd {
  height: 80px;
  display: flex;
  align-items: center;
}

:deep(.arco-table .arco-table-footer) {
  padding: 0 !important;
}

:deep(.arco-table-cell):has(.diytd) {
  padding: 0;
}

:deep(.arco-table-cell):has(.diytd) .diytd {
  padding: 0.6rem 1.06667rem;
  border-bottom: 1px solid #ddd;
}

:deep(.arco-table-cell):has(.diytd) .diytd:last-child {
  border: none;
}

.flex {
  display: flex;
}

.at_c {
  align-items: center;
}

.h32 {
  height: 32px;
  display: flex;
  align-items: center;
}

.table_name {
  width: 100px;
  box-sizing: border-box;
  padding: 0 40px;
  font-size: 14px;
  background-color: #f2f3f5;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #e5e6eb;
}

.table_body {
  width: 100%;
}

.table_bottom {
  display: flex;
  align-items: center;
  background-color: #f2f3f5;
  box-sizing: border-box;
  border-bottom: 1px solid #e5e6eb;
}

.table_bottom > div {
  box-sizing: border-box;
  padding: 0.6rem 1.06667rem;
  text-align: center;
}

.table_bottom > div:not(:last-child) {
  border-right: 1px solid #e5e6eb;
}

.table_bottom .name {
  width: 100px;
}

.form_bottom {
  width: 100%;
  padding: 10px;
  display: flex;
  justify-content: flex-end;
  /* border-top: 1px solid #e5e6eb; */
}
</style>
